import type { Recordable } from '@/types/global'
import type { ExtractPropTypes, PropType, VNode } from 'vue'

export interface DescrProps {
  // 优先使用DescrSchema中labelClass
  labelClass?: string
  // 配置
  schema?: DescrSchema[]
  // 数据
  data?: Recordable
  // 是否显示冒号
  colon?: boolean
  rowProps?: RowProps
  //配置所有选子项的 ColProps，不需要逐个配置，子项也可单独配置优先与全局
  baseColProps?: Partial<ColEx>
  labelPosition?: 'left' | 'top' //label域标签的位置
}

export interface DescrSchema {
  // 标签
  label?: string
  // 字段 没有时不渲染
  field?: string
  // 是否显示冒号
  colon?: boolean
  labelPosition?: 'left' | 'top' //label域标签的位置
  colProps?: Partial<ColEx> // col参数
  //label class 设置宽度等
  labelClass?: string
  fieldClass?: string
  show?: boolean | ((renderCallbackParams: DescrProps) => boolean) //动态判断当前组件是否显示，css 控制，不会删除 dom
  ifShow?: boolean | ((renderCallbackParams: DescrProps) => boolean) //动态判断当前组件是否显示，js 控制，会删除 dom
  colSlot?: string //自定义 slot，渲染组件
  renderColContent?: ((renderCallbackParams: DescrProps) => any) | VNode | VNode[] | string //自定义渲染组件 col
  suffix?: string | number | VNode | ((renderCallbackParams: DescrProps) => string | VNode | number) //组件后面的内容
  prefix?: string | number | VNode | ((renderCallbackParams: DescrProps) => string | VNode | number) //组件前面的内容
  colOrRow?: 'col' | 'row' //通过布局修改 组件后面的内容改为上面内容 组件前面的内容改为下面内容
  slot?: string //自定义 slot，渲染field
  render?: ((renderCallbackParams: DescrProps) => any) | VNode | VNode[] | string //自定义渲染field
  slotLabel?: string //自定义 label，渲染组件
  renderLabel?: ((renderCallbackParams: DescrProps) => any) | VNode | VNode[] | string //自定义渲染label组件
  type?: 'image' | 'imageArr' | 'pdf' | 'dict' | 'auto' //image图片 imageArr图片数组  pdf  dict字典  auto根据文件名称识别文件类型
  factor?: any //额外参数  如：字典类型(string)
}

export interface DescrActionType {
  setProps: (formProps: Partial<DescrProps>) => Promise<void>
}
export type RegisterFn = (descrInstance: DescrActionType) => void
export type UseDescrnType = [RegisterFn, DescrActionType]

export interface ColEx {
  span?: number //栅格占据的列数
  offset?: number //栅格左侧的间隔格数
  push?: number //栅格向右移动格数
  pull?: number //栅格向左移动格数
  xs?: number | { span?: number; offset?: number; pull?: number; push?: number }
  sm?: number | { span?: number; offset?: number; pull?: number; push?: number }
  md?: number | { span?: number; offset?: number; pull?: number; push?: number }
  lg?: number | { span?: number; offset?: number; pull?: number; push?: number }
  xl?: number | { span?: number; offset?: number; pull?: number; push?: number }
  tag?: string
}
export declare const rowProps: () => {
  gutter?: number
  justify: PropType<'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly'>
  align?: PropType<'top' | 'middle' | 'bottom'>
  tag?: string
}
export declare type RowProps = Partial<ExtractPropTypes<ReturnType<typeof rowProps>>>
